<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Form 表单 | Vue DevUI</title>
    <meta name="description" content="Vue DevUI 组件库">
    <link rel="stylesheet" href="/assets/style.b884dd64.css">
    <link rel="modulepreload" href="/assets/Home.e734a50d.js">
    <link rel="modulepreload" href="/assets/AlgoliaSearchBox.e66f60b3.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="modulepreload" href="/assets/components_form_index.md.aa7415f4.lean.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
    <meta name="twitter:title" content="Form 表单 | Vue DevUI">
    <meta property="og:title" content="Form 表单 | Vue DevUI">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-4bb0db66><div class="nav-bar-inner" data-v-4bb0db66><div class="sidebar-button" data-v-4bb0db66><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" aria-label="Vue DevUI, back to home" data-v-4bb0db66 data-v-4d0f7fcc><img class="logo" src="/../../assets/logo.svg" alt="Logo" data-v-4d0f7fcc><span data-v-4d0f7fcc>Vue DevUI</span></a><!--[--><!--[--><div id="docsearch" multilang="false"></div><!--]--><!--]--><div class="flex-grow" data-v-4bb0db66></div><div class="flex items-center" data-v-4bb0db66><div class="nav" data-v-4bb0db66><nav class="nav-links" data-v-4bb0db66 data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav></div><div class="custom-nav flex items-center ml-l" data-v-4bb0db66><!----><!----><div class="custom-nav-item flex items-center ml-m" data-v-4bb0db66><!--[--><span class="devui-popper-trigger"><svg class="icon-theme" viewbox="0 0 1024 1024" width="16" height="16" data-v-6fec2a10><path fill="var(--devui-text)" d="M512 96C229.696 96 0 325.696 0 608c0 90.368 30.304 174.496 85.344 236.896 55.264 62.624 129.152 97.12 208.128 97.12 81.568 0 161.536-36.832 231.264-106.592l2.272-2.496c65.792-81.472 132.896-121.056 205.088-121.056 46.72 0 89.216 15.872 126.688 29.92 30.336 11.328 56.576 21.12 81.216 21.12C1024 762.912 1024 654.336 1024 608c0-282.304-229.696-512-512-512z m428 602.912c-13.088 0-35.296-8.288-58.784-17.088-40.48-15.136-90.848-33.952-149.12-33.952-92.352 0-175.328 46.944-253.76 143.456-57.184 56.704-121.056 86.688-184.832 86.688-60.352 0-117.216-26.784-160.128-75.456C88.64 751.872 64 682.784 64 608 64 360.96 264.96 160 512 160s448 200.96 448 448c0 27.328-1.952 90.912-20 90.912z m-203.296-182.848a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-343.68-202.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m215.68 26.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-381.312 112a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM182.4 698.752a96 96 0 1 0 192 0 96 96 0 1 0-192 0z" data-v-6fec2a10></path></svg></span><!--teleport start--><!--teleport end--><!--]--></div><a class="custom-nav-item ml-m" style="font-size:0;user-select:none;" href="https://github.com/DevCloudFE/vue-devui" target="_blank" data-v-4bb0db66><svg viewBox="0 0 20 20" width="18" height="18" data-v-4bb0db66><path fill="var(--devui-text, #252b3a)" d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0" data-v-4bb0db66></path></svg></a></div></div></div></header><aside class="sidebar" data-v-06a2164a><nav class="nav-links nav" data-v-06a2164a data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-06a2164a><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="/quick-start/"><!----><span class="sidebar-link-text">快速开始<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/on-demand/"><!----><span class="sidebar-link-text">按需引入<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/theme-guide/"><!----><span class="sidebar-link-text">主题定制<!----></span></a><!----></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">通用<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/button/"><!----><span class="sidebar-link-text">Button 按钮<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/fullscreen/"><!----><span class="sidebar-link-text">Fullscreen 全屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/icon/"><!----><span class="sidebar-link-text">Icon 图标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/overlay/"><!----><span class="sidebar-link-text">Overlay 遮罩层<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/panel/"><!----><span class="sidebar-link-text">Panel 面板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/ripple/"><!----><span class="sidebar-link-text">Ripple 水波纹<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/search/"><!----><span class="sidebar-link-text">Search 搜索框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/status/"><!----><span class="sidebar-link-text">Status 状态<!----></span></a><!----></li><!----><!----></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">导航<!----></span></p><ul class="sidebar-links"><!----><!----><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/dropdown/"><!----><span class="sidebar-link-text">Dropdown 下拉菜单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/menu/"><!----><span class="sidebar-link-text">Menu 菜单<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/pagination/"><!----><span class="sidebar-link-text">Pagination 分页<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tabs/"><!----><span class="sidebar-link-text">Tabs 选项卡<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">反馈<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/alert/"><!----><span class="sidebar-link-text">Alert 警告<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/drawer/"><!----><span class="sidebar-link-text">Drawer 抽屉板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/loading/"><!----><span class="sidebar-link-text">Loading 加载提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/message/"><!----><span class="sidebar-link-text">Message 全局提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/modal/"><!----><span class="sidebar-link-text">Modal 弹窗<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/notification/"><!----><span class="sidebar-link-text">Notification 全局通知<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/popover/"><!----><span class="sidebar-link-text">Popover 悬浮提示<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/result/"><!----><span class="sidebar-link-text">Result 结果<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tooltip/"><!----><span class="sidebar-link-text">Tooltip 提示<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据录入<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/auto-complete/"><!----><span class="sidebar-link-text">AutoComplete 自动补全<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/checkbox/"><!----><span class="sidebar-link-text">Checkbox 复选框<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/date-picker-pro/"><!----><span class="sidebar-link-text">DatePickerPro 日期选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/editable-select/"><!----><span class="sidebar-link-text">EditableSelect 可输入下拉选择框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/components/form/"><!----><span class="sidebar-link-text">Form 表单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input/"><!----><span class="sidebar-link-text">Input 输入框<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input-number/"><!----><span class="sidebar-link-text">InputNumber 数字输入框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/mention/"><!----><span class="sidebar-link-text">Mention 提及<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/radio/"><!----><span class="sidebar-link-text">Radio 单选框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/select/"><!----><span class="sidebar-link-text">Select 下拉框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/slider/"><!----><span class="sidebar-link-text">Slider 滑块<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/switch/"><!----><span class="sidebar-link-text">Switch 开关<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/textarea/"><!----><span class="sidebar-link-text">Textarea 多行文本框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-picker/"><!----><span class="sidebar-link-text">TimePicker 时间选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-select/"><!----><span class="sidebar-link-text">TimeSelect 时间选择器<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/upload/"><!----><span class="sidebar-link-text">Upload 上传<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据展示<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/avatar/"><!----><span class="sidebar-link-text">Avatar 头像<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/badge/"><!----><span class="sidebar-link-text">Badge 徽标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/card/"><!----><span class="sidebar-link-text">Card 卡片<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/collapse/"><!----><span class="sidebar-link-text">Collapse 折叠面板<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/countdown/"><!----><span class="sidebar-link-text">Countdown 倒计时<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/image-preview/"><!----><span class="sidebar-link-text">ImagePreview 图片预览<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/progress/"><!----><span class="sidebar-link-text">Progress 进度条<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/rate/"><!----><span class="sidebar-link-text">Rate 评分<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/skeleton/"><!----><span class="sidebar-link-text">Skeleton 骨架屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/statistic/"><!----><span class="sidebar-link-text">Statistic 统计数值<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/steps/"><!----><span class="sidebar-link-text">Steps 步骤条<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/table/"><!----><span class="sidebar-link-text">Table 表格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tag/"><!----><span class="sidebar-link-text">Tag 标签<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/timeline/"><!----><span class="sidebar-link-text">Timeline 时间轴<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tree/"><!----><span class="sidebar-link-text">Tree 树<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">布局<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/grid/"><!----><span class="sidebar-link-text">Grid 栅格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/layout/"><!----><span class="sidebar-link-text">Layout 布局<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/splitter/"><!----><span class="sidebar-link-text">Splitter 分割器<!----></span></a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-35e0cb6b><div class="container" data-v-35e0cb6b><!--[--><!--]--><div style="position:relative;" class="content" data-v-35e0cb6b><div><h1 id="form-表单" tabindex="-1">Form 表单 <a class="header-anchor" href="#form-表单" aria-hidden="true">#</a></h1><p>具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。</p><h4 id="何时使用" tabindex="-1">何时使用 <a class="header-anchor" href="#何时使用" aria-hidden="true">#</a></h4><p>需要进行数据收集、数据校验、数据提交功能时。</p><h3 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><form class="devui-form"><!--[--><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Name<!--]--></span><!--[--><svg width="16px" height="16px" viewbox="0 0 16 16" class="devui-form__label-help"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g><path d="M8.5,8.95852078 L8.5,11 L7.5,11 L7.5,8.5 C7.5,8.22385763             7.72385763,8 8,8 C9.1045695,8 10,7.1045695 10,6 C10,4.8954305             9.1045695,4 8,4 C6.8954305,4 6,4.8954305 6,6 L5,6 C5,4.34314575             6.34314575,3 8,3 C9.65685425,3 11,4.34314575 11,6 C11,7.48649814             9.91885667,8.72048173 8.5,8.95852078 L8.5,8.95852078 Z M8,16 C3.581722,16             0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278             12.418278,16 8,16 Z M8,15 C11.8659932,15 15,11.8659932 15,8 C15,4.13400675 11.8659932,1 8,1             C4.13400675,1 1,4.13400675 1,8 C1,11.8659932 4.13400675,15 8,15 Z M7.5,12 L8.5,12 L8.5,13 L7.5,13 L7.5,12 Z" fill="#293040" fill-rule="nonzero"></path></g></g></svg><!--teleport start--><!--teleport end--><!--]--></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-input" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请输入" type="text"><!----></div><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----><div class="devui-form__control-extra">Enter a short name that meets reading habits.</div></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Description<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div style="width:100%;"><textarea style="resize:none;" class="devui-textarea"></textarea><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Select<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-select"><div class="devui-select__selection"><input value type="text" class="devui-select__input" placeholder="请选择" readonly><span class="devui-select__clear"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></span><span class="devui-select__arrow"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088         7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876         3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6         12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><!--teleport start--><!--teleport end--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Radio<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-radio-group is-row"><!--[--><div class="devui-radio__wrapper"><label class="active devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="0" checked><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Manual execution<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="1"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Daily execution<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="2"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Weekly execution<!--]--></span></label></div><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Switch<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-switch devui-switch--md"><span class="devui-switch__wrapper devui-switch--checked" style="background:undefined;border-color:undefined;"><span class="devui-switch__inner-wrapper"><div class="devui-switch__inner"><!--[--><!--]--></div></span><small></small></span></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Execution day<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-checkbox__group is-row" label="Execution day"><!--[--><div class="" style=""><div class="devui-checkbox unchecked"><label title="Mon" class="devui-checkbox--md" style="width:auto;"><input name="Mon" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Mon</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Tue" class="devui-checkbox--md" style="width:auto;"><input name="Tue" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Tue</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Wed" class="devui-checkbox--md" style="width:auto;"><input name="Wed" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Wed</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Thur" class="devui-checkbox--md" style="width:auto;"><input name="Thur" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Thur</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Fri" class="devui-checkbox--md" style="width:auto;"><input name="Fri" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Fri</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Sat" class="devui-checkbox--md" style="width:auto;"><input name="Sat" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Sat</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Sun" class="devui-checkbox--md" style="width:auto;"><input name="Sun" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Sun</span></label></div></div><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form-operation form-demo-form-operation" style="margin-left:116px;"><!--[--><button class="devui-button devui-button--solid devui-button--solid--primary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->提交<!--]--></span></button><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->取消<!--]--></span></button><!--]--></div><!--]--></form></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>默认提供水平布局，<code>data</code>参数用于设置表单数据。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">help-tips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>This is the plan name.<span class="token punctuation">&quot;</span></span> <span class="token attr-name">extra-info</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Enter a short name that meets reading habits.<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.name<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>description<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Description<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-textarea</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.description<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectOptions<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio-group</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Manual execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Daily execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Weekly execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>switch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Switch<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.switch<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-switch</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>executionDay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Execution day<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.executionDay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Execution day<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mon<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Tue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Tue<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Wed<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Wed<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thur<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thur<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Fri<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Fri<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sat<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sat<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sun<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sun<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-operation</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-demo-form-operation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span><span class="token punctuation">&gt;</span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-operation</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> nextTick <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> formModel <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">select</span><span class="token operator">:</span> <span class="token string">&#39;Options2&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">radio</span><span class="token operator">:</span> <span class="token string">&#39;0&#39;</span><span class="token punctuation">,</span>
      <span class="token keyword">switch</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token literal-property property">executionDay</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> selectOptions <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;Options1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;Options2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;Options3&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      formModel<span class="token punctuation">,</span>
      selectOptions<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.form-demo-form-operation &gt; *</span> <span class="token punctuation">{</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="表单样式" tabindex="-1">表单样式 <a class="header-anchor" href="#表单样式" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="form-btn-groups"><div class="form-btn"> 大小： <div class="devui-radio-group is-row"><!--[--><!--[--><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="sm"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Small<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="active devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="md" checked><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Middle<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="lg"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Large<!--]--></span></label></div><!--]--><!--]--></div></div><div class="form-btn"> 对齐方式： <div class="devui-radio-group is-row"><!--[--><!--[--><div class="devui-radio__wrapper"><label class="active devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="start" checked><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Start<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="center"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Center<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="end"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->End<!--]--></span></label></div><!--]--><!--]--></div></div></div><form class="devui-form"><!--[--><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Name<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-input" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请输入" type="text"><!----></div><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Description<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div style="width:100%;"><textarea style="resize:none;" class="devui-textarea"></textarea><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Execution day<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-checkbox__group is-row" label="Execution day"><!--[--><div class="" style=""><div class="devui-checkbox unchecked"><label title="Mon" class="devui-checkbox--md" style="width:auto;"><input name="Mon" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Mon</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Tue" class="devui-checkbox--md" style="width:auto;"><input name="Tue" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Tue</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Wed" class="devui-checkbox--md" style="width:auto;"><input name="Wed" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Wed</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Thur" class="devui-checkbox--md" style="width:auto;"><input name="Thur" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Thur</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Fri" class="devui-checkbox--md" style="width:auto;"><input name="Fri" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Fri</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Sat" class="devui-checkbox--md" style="width:auto;"><input name="Sat" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Sat</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Sun" class="devui-checkbox--md" style="width:auto;"><input name="Sun" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Sun</span></label></div></div><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form-operation form-demo-form-operation" style="margin-left:116px;"><!--[--><button class="devui-button devui-button--solid devui-button--solid--primary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->提交<!--]--></span></button><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->取消<!--]--></span></button><!--]--></div><!--]--></form></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>水平排列模式下，<code>label-size</code>可以设置<code>label</code>的宽度，提供<code>sm</code>、<code>md</code>、<code>lg</code>三种大小，分别对应<code>80px</code>、<code>100px</code>、<code>150px</code>，默认为<code>md</code>；<code>label-align</code>可以设置<code>label</code>的对齐方式，可选值为<code>start</code>、<code>center</code>、<code>end</code>，默认为<code>start</code>。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-btn-groups<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      大小：
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio-group</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>size<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in sizeList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          {{ item.label }}
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      对齐方式：
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio-group</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in alignList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.label<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          {{ item.label }}
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:label-size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>size<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:label-align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>align<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.name<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>description<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Description<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-textarea</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.description<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>executionDay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Execution day<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.executionDay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Execution day<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mon<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Tue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Tue<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Wed<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Wed<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thur<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thur<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Fri<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Fri<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sat<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sat<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sun<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sun<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-operation</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-demo-form-operation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span><span class="token punctuation">&gt;</span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-operation</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> formModel <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">executionDay</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> size <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;md&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> align <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;start&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> sizeList <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Small&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;sm&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Middle&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;md&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Large&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;lg&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> alignList <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Start&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;start&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Center&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;center&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;End&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;end&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      formModel<span class="token punctuation">,</span>
      size<span class="token punctuation">,</span>
      sizeList<span class="token punctuation">,</span>
      align<span class="token punctuation">,</span>
      alignList<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.form-btn-groups</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.form-btn</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="垂直排列" tabindex="-1">垂直排列 <a class="header-anchor" href="#垂直排列" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><form class="devui-form"><!--[--><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->Name<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-input" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请输入" type="text"><!----></div><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->Description<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div style="width:100%;"><textarea style="resize:none;" class="devui-textarea"></textarea><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->Select<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-select"><div class="devui-select__selection"><input value type="text" class="devui-select__input" placeholder="请选择" readonly><span class="devui-select__clear"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></span><span class="devui-select__arrow"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088         7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876         3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6         12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><!--teleport start--><!--teleport end--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->Radio<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-radio-group is-row"><!--[--><div class="devui-radio__wrapper"><label class="active devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="0" checked><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Manual execution<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="1"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Daily execution<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="2"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Weekly execution<!--]--></span></label></div><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->Switch<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-switch devui-switch--md"><span class="devui-switch__wrapper devui-switch--checked" style="background:undefined;border-color:undefined;"><span class="devui-switch__inner-wrapper"><div class="devui-switch__inner"><!--[--><!--]--></div></span><small></small></span></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->Execution day<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-checkbox__group is-row" label="Execution day"><!--[--><div class="" style=""><div class="devui-checkbox unchecked"><label title="Mon" class="devui-checkbox--md" style="width:auto;"><input name="Mon" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Mon</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Tue" class="devui-checkbox--md" style="width:auto;"><input name="Tue" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Tue</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Wed" class="devui-checkbox--md" style="width:auto;"><input name="Wed" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Wed</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Thur" class="devui-checkbox--md" style="width:auto;"><input name="Thur" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Thur</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Fri" class="devui-checkbox--md" style="width:auto;"><input name="Fri" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Fri</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Sat" class="devui-checkbox--md" style="width:auto;"><input name="Sat" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Sat</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Sun" class="devui-checkbox--md" style="width:auto;"><input name="Sun" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Sun</span></label></div></div><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form-operation form-demo-form-operation" style=""><!--[--><button class="devui-button devui-button--solid devui-button--solid--primary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->提交<!--]--></span></button><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->取消<!--]--></span></button><!--]--></div><!--]--></form></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>设置<code>layout</code>参数为<code>vertical</code>可启用垂直布局，即<code>label</code>在输入控件的上方。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form</span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vertical<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.name<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>description<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Description<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-textarea</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.description<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectOptions<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio-group</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Manual execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Daily execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Weekly execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>switch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Switch<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.switch<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-switch</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>executionDay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Execution day<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.executionDay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Execution day<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mon<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Tue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Tue<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Wed<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Wed<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thur<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thur<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Fri<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Fri<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sat<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sat<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sun<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sun<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-operation</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-demo-form-operation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span><span class="token punctuation">&gt;</span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-operation</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> formModel <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">select</span><span class="token operator">:</span> <span class="token string">&#39;Options2&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">radio</span><span class="token operator">:</span> <span class="token string">&#39;0&#39;</span><span class="token punctuation">,</span>
      <span class="token keyword">switch</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token literal-property property">executionDay</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> selectOptions <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;Options1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;Options2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;Options3&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      formModel<span class="token punctuation">,</span>
      selectOptions<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="多列表单" tabindex="-1">多列表单 <a class="header-anchor" href="#多列表单" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><form class="devui-form"><!--[--><div class="devui-row devui-row__align--top devui-row__justify--start"><!--[--><div class="devui-col devui-col__span--7" style="padding-left:8px;padding-right:8px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->Name<!--]--></span><!--[--><svg width="16px" height="16px" viewbox="0 0 16 16" class="devui-form__label-help"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g><path d="M8.5,8.95852078 L8.5,11 L7.5,11 L7.5,8.5 C7.5,8.22385763             7.72385763,8 8,8 C9.1045695,8 10,7.1045695 10,6 C10,4.8954305             9.1045695,4 8,4 C6.8954305,4 6,4.8954305 6,6 L5,6 C5,4.34314575             6.34314575,3 8,3 C9.65685425,3 11,4.34314575 11,6 C11,7.48649814             9.91885667,8.72048173 8.5,8.95852078 L8.5,8.95852078 Z M8,16 C3.581722,16             0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278             12.418278,16 8,16 Z M8,15 C11.8659932,15 15,11.8659932 15,8 C15,4.13400675 11.8659932,1 8,1             C4.13400675,1 1,4.13400675 1,8 C1,11.8659932 4.13400675,15 8,15 Z M7.5,12 L8.5,12 L8.5,13 L7.5,13 L7.5,12 Z" fill="#293040" fill-rule="nonzero"></path></g></g></svg><!--teleport start--><!--teleport end--><!--]--></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-input" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请输入" type="text"><!----></div><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><!--]--></div><div class="devui-col devui-col__span--7" style="padding-left:8px;padding-right:8px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->Select<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-select"><div class="devui-select__selection"><input value type="text" class="devui-select__input" placeholder="请选择" readonly><span class="devui-select__clear"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></span><span class="devui-select__arrow"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088         7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876         3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6         12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><!--teleport start--><!--teleport end--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><!--]--></div><div class="devui-col devui-col__span--7" style="padding-left:8px;padding-right:8px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->Multiple Select<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-select devui-dropdown-menu-multiple"><div class="devui-select__selection"><div class="devui-select__multiple"><!----><!----><!----><div class="devui-select__multiple--input"><input value type="text" class="devui-select__input" placeholder="请选择" readonly></div></div><span class="devui-select__clear"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></span><span class="devui-select__arrow"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088         7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876         3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6         12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><!--teleport start--><!--teleport end--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><!--]--></div><!--]--></div><div class="devui-row devui-row__align--top devui-row__justify--start"><!--[--><div class="devui-col devui-col__span--7" style="padding-left:8px;padding-right:8px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->Execution day<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-checkbox__group is-column" label="Execution day"><!--[--><div class="devui-checkbox__column-margin" style=""><div class="devui-checkbox unchecked"><label title="Mon" class="devui-checkbox--md" style="width:auto;"><input name="Mon" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Mon</span></label></div></div><div class="devui-checkbox__column-margin" style=""><div class="devui-checkbox unchecked"><label title="Tue" class="devui-checkbox--md" style="width:auto;"><input name="Tue" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Tue</span></label></div></div><div class="devui-checkbox__column-margin" style=""><div class="devui-checkbox unchecked"><label title="Wed" class="devui-checkbox--md" style="width:auto;"><input name="Wed" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Wed</span></label></div></div><div class="devui-checkbox__column-margin" style=""><div class="devui-checkbox unchecked"><label title="Thur" class="devui-checkbox--md" style="width:auto;"><input name="Thur" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Thur</span></label></div></div><div class="devui-checkbox__column-margin" style=""><div class="devui-checkbox unchecked"><label title="Fri" class="devui-checkbox--md" style="width:auto;"><input name="Fri" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Fri</span></label></div></div><div class="devui-checkbox__column-margin" style=""><div class="devui-checkbox unchecked"><label title="Sat" class="devui-checkbox--md" style="width:auto;"><input name="Sat" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Sat</span></label></div></div><div class="devui-checkbox__column-margin" style=""><div class="devui-checkbox unchecked"><label title="Sun" class="devui-checkbox--md" style="width:auto;"><input name="Sun" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Sun</span></label></div></div><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><!--]--></div><div class="devui-col devui-col__span--7" style="padding-left:8px;padding-right:8px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->Radio<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-radio-group is-row"><!--[--><div class="devui-radio__wrapper"><label class="active devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="0" checked><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Manual execution<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="1"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Daily execution<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="2"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Weekly execution<!--]--></span></label></div><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><!--]--></div><div class="devui-col devui-col__span--7" style="padding-left:8px;padding-right:8px;padding-top:0px;padding-bottom:0px;"><!--[--><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->Switch<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-switch devui-switch--md"><span class="devui-switch__wrapper devui-switch--checked" style="background:undefined;border-color:undefined;"><span class="devui-switch__inner-wrapper"><div class="devui-switch__inner"><!--[--><!--]--></div></span><small></small></span></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><!--]--></div><!--]--></div><div class="devui-form-operation form-demo-form-operation" style=""><!--[--><button class="devui-button devui-button--solid devui-button--solid--primary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->提交<!--]--></span></button><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->取消<!--]--></span></button><!--]--></div><!--]--></form></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>搭配<code>Grid</code>栅格布局方案，即可方便的实现多列表单布局效果。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form</span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vertical<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">:gutter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">help-tips</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>This is the plan name.<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.name<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectOptions<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>multiSelect<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Multiple Select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.multiSelect<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">:gutter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>executionDay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Execution day<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.executionDay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Execution day<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mon<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Tue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Tue<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Wed<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Wed<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thur<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thur<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Fri<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Fri<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sat<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sat<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sun<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sun<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio-group</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Manual execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Daily execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Weekly execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio-group</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-col</span> <span class="token attr-name">:span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>switch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Switch<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.switch<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-switch</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-operation</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-demo-form-operation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span><span class="token punctuation">&gt;</span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-operation</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> formModel <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">select</span><span class="token operator">:</span> <span class="token string">&#39;Options2&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">multiSelect</span><span class="token operator">:</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token literal-property property">executionDay</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">radio</span><span class="token operator">:</span> <span class="token string">&#39;0&#39;</span><span class="token punctuation">,</span>
      <span class="token keyword">switch</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> selectOptions <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;Options1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;Options2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;Options3&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> formModel<span class="token punctuation">,</span> selectOptions <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="尺寸控制" tabindex="-1">尺寸控制 <a class="header-anchor" href="#尺寸控制" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="form-demo-set-form-size"> 尺寸： <div class="devui-radio-group is-row"><!--[--><!--[--><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="sm"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Small<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="active devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="md" checked><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Middle<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="lg"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Large<!--]--></span></label></div><!--]--><!--]--></div></div><form class="devui-form"><!--[--><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Name<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请输入" type="text"><!----></div><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Search<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><label class="devui-search devui-search--md devui-search--right"><!----><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请输入" maxlength="9007199254740991" type="text"><!----></div><!----></div><!----><div class="devui-search__icon"><svg viewbox="0 0 1024 1024" version="1.1" width="12px" height="12px"><path d="M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288       358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z" fill="#262626" p-id="32547"></path></svg></div></label><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->InputNumber<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-input-number devui-input-number--md" style=""><div class="devui-input-number__control-buttons"><span class="control-button control-inc"><svg class="devui-input-number__icon-arrow" width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466           L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842           4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span><span class="control-button control-dec"><svg class="devui-input-number__icon-arrow" width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466           L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842           4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><div class="devui-input-number__input-wrap"><input value="1" placeholder="请输入" class="devui-input-number__input-box"></div></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Description<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div style="width:100%;"><textarea style="resize:none;" class="devui-textarea"></textarea><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Select<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-select"><div class="devui-select__selection"><input value type="text" class="devui-select__input" placeholder="请选择" readonly><span class="devui-select__clear"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></span><span class="devui-select__arrow"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088         7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876         3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6         12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><!--teleport start--><!--teleport end--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->AutoComplete<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-auto-complete devui-auto-complete--md devui-form-group devui-has-feedback" style="width:400px;"><div class="devui-auto-complete-input"><!----><div class="devui-auto-complete-input__wrapper"><input type="text" class="devui-form-control devui-dropdown-origin" placeholder="Search" value><!----></div><!----></div><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Radio<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-radio-group is-row"><!--[--><div class="devui-radio__wrapper"><label class="active devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="0" checked><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Manual execution<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="1"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Daily execution<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="2"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Weekly execution<!--]--></span></label></div><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Switch<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-switch devui-switch--md"><span class="devui-switch__wrapper devui-switch--checked" style="background:undefined;border-color:undefined;"><span class="devui-switch__inner-wrapper"><div class="devui-switch__inner"><!--[--><!--]--></div></span><small></small></span></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Execution day<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-checkbox__group is-row" label="Execution day"><!--[--><div class="" style=""><div class="devui-checkbox unchecked"><label title="Mon" class="devui-checkbox--md" style="width:auto;"><input name="Mon" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Mon</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Tue" class="devui-checkbox--md" style="width:auto;"><input name="Tue" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Tue</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Wed" class="devui-checkbox--md" style="width:auto;"><input name="Wed" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Wed</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Thur" class="devui-checkbox--md" style="width:auto;"><input name="Thur" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Thur</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Fri" class="devui-checkbox--md" style="width:auto;"><input name="Fri" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Fri</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Sat" class="devui-checkbox--md" style="width:auto;"><input name="Sat" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Sat</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Sun" class="devui-checkbox--md" style="width:auto;"><input name="Sun" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Sun</span></label></div></div><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Date Picker Pro<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-date-picker-pro"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Time Select<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-select"><div class="devui-select__selection"><input value type="text" class="devui-select__input" placeholder="请选择时间" readonly><span class="devui-select__clear"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></span><span class="devui-select__arrow"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088         7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876         3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6         12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><!--teleport start--><!--teleport end--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--horizontal"><span class="devui-form__label devui-form__label--md devui-form__label--start"><span class="devui-form__label-span"><!--[-->Time Picker<!--]--></span></span><div class="devui-form__control devui-form__control--horizontal"><div class="devui-form__control-container devui-form__control-container--horizontal"><!--[--><div class="devui-time-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请选择时间" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="time-input-icon"><span class="clear-button"></span><div class="devui-icon__container devui-icon--no-slots"><!----><i class="icon icon-time" style="font-size:small;color:inherit;transform:rotate(undefineddeg);"></i><!----></div></span><!--]--><!----><!----></span></div><!----></div><!--teleport start--><!--teleport end--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form-operation form-demo-form-operation" style="margin-left:116px;"><!--[--><button class="devui-button devui-button--solid devui-button--solid--primary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->提交<!--]--></span></button><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->取消<!--]--></span></button><!--]--></div><!--]--></form></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过<code>size</code>属性可控制所有控件的尺寸。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-demo-set-form-size<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    尺寸：
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio-group</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSize<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in sizeTypeList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        {{ item.label }}
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio-group</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formSize<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Name<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-search</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-search</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inputNumber<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>InputNumber<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-input-number</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.inputNumber<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-input-number</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>description<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Description<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-textarea</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.description<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectOptions<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoComplete<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>AutoComplete<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-auto-complete</span> <span class="token attr-name">:source</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>source<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.autoComplete<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-auto-complete</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio-group</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Manual execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Daily execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Weekly execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>switch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Switch<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.switch<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-switch</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>executionDay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Execution day<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.executionDay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Execution day<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mon<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Tue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Tue<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Wed<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Wed<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thur<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thur<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Fri<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Fri<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sat<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sat<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sun<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sun<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerPro<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date Picker Pro<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.datePickerPro<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-date-picker-pro</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>timeSelect<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Time Select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-time-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.timeSelect<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>timePicker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Time Picker<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-time-picker</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formModel.timePicker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请选择时间<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-operation</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-demo-form-operation<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span><span class="token punctuation">&gt;</span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-operation</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> sizeTypeList <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Small&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;sm&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Middle&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;md&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Large&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&#39;lg&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> formSize <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;md&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">let</span> formModel <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">search</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">inputNumber</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">select</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">autoComplete</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">radio</span><span class="token operator">:</span> <span class="token string">&#39;0&#39;</span><span class="token punctuation">,</span>
      <span class="token keyword">switch</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token literal-property property">executionDay</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">datePickerPro</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">timeSelect</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">timePicker</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token keyword">const</span> selectOptions <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;Options1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;Options2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;Options3&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> source <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;C#&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;C&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;C++&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      sizeTypeList<span class="token punctuation">,</span>
      formSize<span class="token punctuation">,</span>
      formModel<span class="token punctuation">,</span>
      source<span class="token punctuation">,</span>
      selectOptions<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.form-demo-set-form-size</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.form-demo-form-operation &gt; *</span> <span class="token punctuation">{</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="表单校验" tabindex="-1">表单校验 <a class="header-anchor" href="#表单校验" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><form class="devui-form"><!--[--><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span devui-form__label--required"><!--[-->用户名<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-input" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请输入" type="text"><!----></div><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span devui-form__label--required"><!--[-->用户信息<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div style="width:100%;"><textarea style="resize:none;" class="devui-textarea"></textarea><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span"><!--[-->年龄<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-input" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请输入" type="text"><!----></div><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span devui-form__label--required"><!--[-->Select<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-select"><div class="devui-select__selection"><input value type="text" class="devui-select__input" placeholder="请选择" readonly><span class="devui-select__clear"><svg width="10px" height="10px" viewbox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero"><path d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"></path></g></g></svg></span><span class="devui-select__arrow"><svg width="1em" height="1em" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088         7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876         3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6         12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z" fill-rule="nonzero"></path></g></svg></span></div><!--teleport start--><!--teleport end--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span devui-form__label--required"><!--[-->AutoComplete<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-auto-complete devui-auto-complete--md devui-form-group devui-has-feedback" style="width:400px;"><div class="devui-auto-complete-input"><!----><div class="devui-auto-complete-input__wrapper"><input type="text" class="devui-form-control devui-dropdown-origin" placeholder="Search" value><!----></div><!----></div><!----></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span devui-form__label--required"><!--[-->Radio<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-radio-group is-row"><!--[--><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="0"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Manual execution<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="1"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Daily execution<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="2"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->Weekly execution<!--]--></span></label></div><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span devui-form__label--required"><!--[-->Execution day<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-checkbox__group is-row" label="Execution day"><!--[--><div class="" style=""><div class="devui-checkbox unchecked"><label title="Mon" class="devui-checkbox--md" style="width:auto;"><input name="Mon" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Mon</span></label></div></div><div class="" style=""><div class="devui-checkbox active"><label title="Tue" class="devui-checkbox--md" style="width:auto;"><input name="Tue" class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Tue</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Wed" class="devui-checkbox--md" style="width:auto;"><input name="Wed" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Wed</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Thur" class="devui-checkbox--md" style="width:auto;"><input name="Thur" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Thur</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Fri" class="devui-checkbox--md" style="width:auto;"><input name="Fri" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Fri</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Sat" class="devui-checkbox--md" style="width:auto;"><input name="Sat" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Sat</span></label></div></div><div class="" style=""><div class="devui-checkbox unchecked"><label title="Sun" class="devui-checkbox--md" style="width:auto;"><input name="Sun" class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text">Sun</span></label></div></div><!--]--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span devui-form__label--required"><!--[-->Date Picker Pro<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-date-picker-pro"><div class="devui-date-picker-pro__single-picker"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-date-picker-pro__single-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="close-icon devui-date-picker-pro--icon-hidden"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></div><!--teleport start--><!--teleport end--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form__item--vertical"><span class="devui-form__label devui-form__label--vertical"><span class="devui-form__label-span devui-form__label--required"><!--[-->Range Date Picker Pro<!--]--></span></span><div class="devui-form__control"><div class="devui-form__control-container"><!--[--><div class="devui-range-date-picker-pro devui-range-date-picker-pro__range-width"><div class="devui-range-date-picker-pro__range-picker"><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__start"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><span class="devui-input-slot__prefix"><!--[--><span class="devui-range-date-picker-pro__range-picker-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M5,0 L5,1 L11,1 L11,0 L12,0 L12,1 L14,1 C15.1045695,         1 16,1.8954305 16,3 L16,14 C16,15.1045695 15.1045695,16 14,         16 L2,16 C0.8954305,16 0,15.1045695 0,14 L0,3 C0,         1.8954305 0.8954305,1 2,1 L4,1 L4,0 L5,0 Z M15,5 L1,         5 L1,14 C1,14.5522847 1.44771525,15 2,15 L14,15 C14.5522847,         15 15,14.5522847 15,14 L15,5 Z M6,7 C6.55228475,7 7,7.44771525 7,         8 L7,10 C7,10.5522847 6.55228475,11 6,11 L4,11 C3.44771525,11 3,         10.5522847 3,10 L3,8 C3,7.44771525 3.44771525,7 4,7 L6,7 Z M6,         8 L4,8 L4,10 L6,10 L6,8 Z M4,2 L2,2 C1.44771525,2 1,2.44771525 1,         3 L1,4 L15,4 L15,3 C15,2.44771525 14.5522847,2 14,2 L12,2 L12,         3 L11,3 L11,2 L5,2 L5,3 L4,3 L4,2 Z" fill="#BABBC0"></path></g></svg></span><!--]--></span><input value class="devui-input__inner" placeholder="请选择开始日期" type="text"><!----></div><!----></div></span><span class="devui-range-date-picker-pro__separator">-</span><span class="devui-range-date-picker-pro__normal-input devui-range-date-picker-pro__input devui-range-date-picker-pro__end"><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="请选择结束日期" type="text"><span class="devui-input-slot__suffix"><!--[--><span class="devui-range-date-picker-pro--icon-hidden close-icon"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,         11.8659932 11.8659932,15 8,15 C4.13400675,15 1,         11.8659932 1,8 C1,4.13400675 4.13400675,1 8,         1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,         4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,         5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,         7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,         10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,         11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,         8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,         11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,         10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,         8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,         5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,         4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,         7.29289322 L5.87867966,5.17157288 Z" fill-rule="nonzero"></path></g></svg></span><!--]--><!----><!----></span></div><!----></div></span></div><!--teleport start--><!--teleport end--></div><!--teleport start--><!--teleport end--><!--]--><!----></div><div class="devui-form__control-info"><!----></div></div></div><div class="devui-form-operation form-operation-wrap" style=""><!--[--><button class="devui-button devui-button--solid devui-button--solid--primary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->提交<!--]--></span></button><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->清除校验结果<!--]--></span></button><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--md"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->重置<!--]--></span></button><!--]--></div><!--]--></form></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">layout</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>vertical<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rules<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:pop-position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[&#39;right&#39;]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span>
      <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{ required: true, message: &#39;用户名不能为空&#39;, trigger: &#39;blur&#39; }]<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:show-feedback</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户名<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formData.username<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>userInfo<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户信息<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-textarea</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formData.userInfo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-textarea</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>age<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>年龄<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formData.age<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formData.select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:options</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectOptions<span class="token punctuation">&quot;</span></span> <span class="token attr-name">allow-clear</span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>autoComplete<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>AutoComplete<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-auto-complete</span> <span class="token attr-name">:source</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>source<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formData.autoComplete<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-auto-complete</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio-group</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formData.radio<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Manual execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Daily execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Weekly execution<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>executionDay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Execution day<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formData.executionDay<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Execution day<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Mon<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Tue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Tue<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Wed<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Wed<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thur<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Thur<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Fri<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Fri<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sat<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sat<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sun<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sun<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-checkbox-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datePickerPro<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Date Picker Pro<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formData.datePickerPro<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-date-picker-pro</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-item</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rangeDatePickerPro<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Range Date Picker Pro<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-range-date-picker-pro</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formData.rangeDatePickerPro<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-range-date-picker-pro</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-form-operation</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-operation-wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onClear<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>清除校验结果<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onReset<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>重置<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form-operation</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-form</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> reactive<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> watch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> formRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> formData <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">userInfo</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">select</span><span class="token operator">:</span> <span class="token string">&#39;Options2&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">autoComplete</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">executionDay</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;Tue&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">radio</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">datePickerPro</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">rangeDatePickerPro</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&#39;&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> selectOptions <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;Options1&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;Options2&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;Options3&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> source <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;C#&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;C&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;C++&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">checkAge</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&#39;年龄不能为空&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">&lt;</span> <span class="token number">18</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&#39;年龄不能小于18&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
          <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">checkRangeDatePickerPro</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>value <span class="token operator">||</span> <span class="token punctuation">(</span><span class="token operator">!</span>value<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>value<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&#39;请选择日期范围&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>value<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&#39;请选择开始日期&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>value<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">&#39;请选择结束日期&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> rules <span class="token operator">=</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">&#39;用户名需不小于3个字符，不大于6个字符&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;change&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">userInfo</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">&#39;用户信息不能为空&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;blur&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">validator</span><span class="token operator">:</span> checkAge <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">select</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">&#39;请选择&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;change&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">autoComplete</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">&#39;请选择&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;change&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">executionDay</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;array&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">&#39;请至少选择一个执行时间&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;change&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">radio</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">&#39;请选择&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;change&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">datePickerPro</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;object&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">&#39;请选择日期&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;change&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">rangeDatePickerPro</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> <span class="token literal-property property">validator</span><span class="token operator">:</span> checkRangeDatePickerPro <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;array&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">&#39;请选择日期范围&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;change&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      formRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">isValid<span class="token punctuation">,</span> invalidFields</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>isValid<span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>invalidFields<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">onClear</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      formRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">clearValidate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">onReset</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      formRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">resetFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span> formRef<span class="token punctuation">,</span> formData<span class="token punctuation">,</span> selectOptions<span class="token punctuation">,</span> source<span class="token punctuation">,</span> rules<span class="token punctuation">,</span> onClick<span class="token punctuation">,</span> onClear<span class="token punctuation">,</span> onReset <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.form-operation-wrap &gt; *</span> <span class="token punctuation">{</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="form-参数" tabindex="-1">Form 参数 <a class="header-anchor" href="#form-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认值</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 demo</th></tr></thead><tbody><tr><td style="text-align:left;">data</td><td style="text-align:left;"><code>object</code></td><td style="text-align:left;">{}</td><td style="text-align:left;">必选，表单数据</td><td style="text-align:left;"><a href="#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95">基础用法</a></td></tr><tr><td style="text-align:left;">layout</td><td style="text-align:left;"><a href="#layout">Layout</a></td><td style="text-align:left;">&#39;horizontal&#39;</td><td style="text-align:left;">可选，设置表单的排列方式</td><td style="text-align:left;"><a href="#%E5%9E%82%E7%9B%B4%E6%8E%92%E5%88%97">垂直排列</a></td></tr><tr><td style="text-align:left;">label-size</td><td style="text-align:left;"><a href="#labelsize">LabelSize</a></td><td style="text-align:left;">&#39;md&#39;</td><td style="text-align:left;">可选，设置 label 的宽度，默认为 100px，sm 对应 80px，lg 对应 150px</td><td style="text-align:left;"><a href="#%E8%A1%A8%E5%8D%95%E6%A0%B7%E5%BC%8F">表单样式</a></td></tr><tr><td style="text-align:left;">label-align</td><td style="text-align:left;"><a href="#labelalign">LabelAlign</a></td><td style="text-align:left;">&#39;start&#39;</td><td style="text-align:left;">可选，设置水平布局方式下，label 对齐方式</td><td style="text-align:left;"><a href="#%E8%A1%A8%E5%8D%95%E6%A0%B7%E5%BC%8F">表单样式</a></td></tr><tr><td style="text-align:left;">rules</td><td style="text-align:left;"><a href="#formrules">FormRules</a></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，设置表单的校验规则</td><td style="text-align:left;"><a href="#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C">表单校验</a></td></tr><tr><td style="text-align:left;">message-type</td><td style="text-align:left;"><a href="#messagetype">MessageType</a></td><td style="text-align:left;">&#39;popover&#39;</td><td style="text-align:left;">可选，设置校验信息的提示方式</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">pop-position</td><td style="text-align:left;"><a href="#popposition">PopPosition</a></td><td style="text-align:left;">[&#39;right&#39;,&#39;bottom&#39;]</td><td style="text-align:left;">可选，消息显示为 popover 时，popover 弹出方向</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">validate-on-rule-change</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否在 rules 改变后立即触发一次验证</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">show-feedback</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否展示校验结果反馈图标</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">disabled</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，是否禁用该表单内的所有组件。</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">size</td><td style="text-align:left;"><a href="#formsize">FormSize</a></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，用于控制该表单内组件的尺寸</td><td style="text-align:left;"></td></tr></tbody></table><h3 id="form-事件" tabindex="-1">Form 事件 <a class="header-anchor" href="#form-事件" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">事件名</th><th style="text-align:left;">回调参数</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">validate</td><td style="text-align:left;"><code>Function(field: string, isValid: boolean, message: string) =&gt; void</code></td><td style="text-align:left;">表单项被校验后触发</td></tr></tbody></table><h3 id="form-方法" tabindex="-1">Form 方法 <a class="header-anchor" href="#form-方法" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">方法名</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">validate</td><td style="text-align:left;"><code>(callback?: FormValidateCallback) =&gt; Promise</code></td><td style="text-align:left;">表单校验函数</td><td style="text-align:left;"><a href="#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C">表单校验</a></td></tr><tr><td style="text-align:left;">validateFields</td><td style="text-align:left;"><code>(fields: string[], callback?: FormValidateCallback) =&gt; Promise</code></td><td style="text-align:left;">校验指定字段</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">resetFields</td><td style="text-align:left;"><code>(fields: string[]) =&gt; void</code></td><td style="text-align:left;">重置表单项的值，并移除校验结果</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">clearValidate</td><td style="text-align:left;"><code>(fields: string[]) =&gt; void</code></td><td style="text-align:left;">清除校验结果，参数为需要清除的表单项<code>field</code>，默认清除全部</td><td style="text-align:left;"></td></tr></tbody></table><h3 id="form-插槽" tabindex="-1">Form 插槽 <a class="header-anchor" href="#form-插槽" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">插槽名</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">default</td><td style="text-align:left;">包裹整个表单内容</td></tr></tbody></table><h3 id="formitem-参数" tabindex="-1">FormItem 参数 <a class="header-anchor" href="#formitem-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认值</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 demo</th></tr></thead><tbody><tr><td style="text-align:left;">field</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;&#39;</td><td style="text-align:left;">可选，指定验证表单需验证的字段，验证表单时必选该属性</td><td style="text-align:left;"><a href="#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95">基础用法</a></td></tr><tr><td style="text-align:left;">required</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">false</td><td style="text-align:left;">可选，表单选项是否必填</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">rules</td><td style="text-align:left;"><a href="#formruleitem">FormRuleItem | FormRuleItem[]</a></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，表单项的校验规则</td><td style="text-align:left;"><a href="#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C">表单校验</a></td></tr><tr><td style="text-align:left;">message-type</td><td style="text-align:left;"><a href="#messagetype">MessageType</a></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，用法同父组件<code>message-type</code>参数，优先级高于父组件，默认继承父组件的值</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">pop-position</td><td style="text-align:left;"><a href="#popposition">PopPosition</a></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，用法同父组件<code>pop-position</code>参数，优先级高于父组件，默认继承父组件的值</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">show-feedback</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，是否展示校验结果反馈图标，优先级高于父组件，默认继承父组件的值</td><td style="text-align:left;"></td></tr><tr><td style="text-align:left;">help-tips</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;&#39;</td><td style="text-align:left;">可选，表单项帮助指引提示内容，空字符串表示不设置提示内容。</td><td style="text-align:left;"><a href="#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95">基础用法</a></td></tr><tr><td style="text-align:left;">extra-info</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">&#39;&#39;</td><td style="text-align:left;">可选，附件信息，一般用于补充表单选项的说明</td><td style="text-align:left;"><a href="#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95">基础用法</a></td></tr><tr><td style="text-align:left;">feedback-status</td><td style="text-align:left;"><a href="#feedbackstatus">FeedbackStatus</a></td><td style="text-align:left;">--</td><td style="text-align:left;">可选，手动指定当前 control 状态反馈</td><td style="text-align:left;"></td></tr></tbody></table><h3 id="formitem-方法" tabindex="-1">FormItem 方法 <a class="header-anchor" href="#formitem-方法" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">方法名</th><th style="text-align:left;">类型</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">resetField</td><td style="text-align:left;"><code>() =&gt; void</code></td><td style="text-align:left;">重置表单项的值，并移除校验结果</td></tr><tr><td style="text-align:left;">clearValidate</td><td style="text-align:left;"><code>() =&gt; void</code></td><td style="text-align:left;">清除校验结果</td></tr></tbody></table><h3 id="formitem-插槽" tabindex="-1">FormItem 插槽 <a class="header-anchor" href="#formitem-插槽" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">插槽名</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">default</td><td style="text-align:left;">包裹单个表单项的输入控件</td></tr></tbody></table><h3 id="form-类型定义" tabindex="-1">Form 类型定义 <a class="header-anchor" href="#form-类型定义" aria-hidden="true">#</a></h3><h4 id="layout" tabindex="-1">Layout <a class="header-anchor" href="#layout" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">Layout</span> <span class="token operator">=</span> <span class="token string">&#39;horizontal&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;vertical&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="labelsize" tabindex="-1">LabelSize <a class="header-anchor" href="#labelsize" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">LabelSize</span> <span class="token operator">=</span> <span class="token string">&#39;sm&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;md&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;lg&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="labelalign" tabindex="-1">LabelAlign <a class="header-anchor" href="#labelalign" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">LabelAlign</span> <span class="token operator">=</span> <span class="token string">&#39;start&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;center&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;end&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="formrules" tabindex="-1">FormRules <a class="header-anchor" href="#formrules" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">FormRules</span> <span class="token operator">=</span> Partial<span class="token operator">&lt;</span>Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>FormRuleItem<span class="token operator">&gt;&gt;&gt;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="messagetype" tabindex="-1">MessageType <a class="header-anchor" href="#messagetype" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">MessageType</span> <span class="token operator">=</span> <span class="token string">&#39;popover&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;text&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;none&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="popposition" tabindex="-1">PopPosition <a class="header-anchor" href="#popposition" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">PopPosition</span> <span class="token operator">=</span>
  <span class="token operator">|</span> <span class="token string">&#39;top&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;right&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;bottom&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;left&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;top-start&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;top-end&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;right-start&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;right-end&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;bottom-start&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;bottom-end&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;left-start&#39;</span>
  <span class="token operator">|</span> <span class="token string">&#39;left-end&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="formsize" tabindex="-1">FormSize <a class="header-anchor" href="#formsize" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">FormSize</span> <span class="token operator">=</span> <span class="token string">&#39;sm&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;md&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;lg&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="formvalidatecallback" tabindex="-1">FormValidateCallback <a class="header-anchor" href="#formvalidatecallback" aria-hidden="true">#</a></h4><p><code>ValidateFieldsError</code>类型参考<a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer">async-validator</a>。</p><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">FormValidateCallback</span> <span class="token operator">=</span> <span class="token punctuation">(</span>isValid<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">,</span> invalidFields<span class="token operator">?</span><span class="token operator">:</span> ValidateFieldsError<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="formitem-类型定义" tabindex="-1">FormItem 类型定义 <a class="header-anchor" href="#formitem-类型定义" aria-hidden="true">#</a></h3><h4 id="formruleitem" tabindex="-1">FormRuleItem <a class="header-anchor" href="#formruleitem" aria-hidden="true">#</a></h4><p><code>RuleItem</code>类型参考<a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer">async-validator</a>。</p><div class="language-ts"><pre><code><span class="token keyword">interface</span> <span class="token class-name">FormRuleItem</span> <span class="token keyword">extends</span> <span class="token class-name">RuleItem</span> <span class="token punctuation">{</span>
  trigger<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="feedbackstatus" tabindex="-1">FeedbackStatus <a class="header-anchor" href="#feedbackstatus" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">FeedbackStatus</span> <span class="token operator">=</span> <span class="token string">&#39;success&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;error&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;pending&#39;</span><span class="token punctuation">;</span>
</code></pre></div></div></div><div data-v-35e0cb6b><div class="page-contributor-label" data-v-35e0cb6b>Contributors</div><div class="page-contributor" data-v-35e0cb6b data-v-36223ac2><!--[--><a href="https://github.com/linxiang07" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/40119767?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/AlanLee97" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/42601044?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/xingyan95" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/11143986?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/kagol" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/9566362?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><!--]--></div></div><footer class="page-footer" data-v-35e0cb6b data-v-63a8fcc6><div class="edit" data-v-63a8fcc6><div class="edit-link" data-v-63a8fcc6 data-v-084d37fe><!----></div></div><div class="updated" data-v-63a8fcc6><!----></div></footer><div class="next-and-prev-link" data-v-35e0cb6b data-v-1443c067><div class="container" data-v-1443c067><div class="prev" data-v-1443c067><a class="link" href="/components/editable-select/" data-v-1443c067><svg t="1637469990202" class="icon icon icon-prev" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5081" width="16" height="16" data-v-1443c067><path d="M277.92 512.064c0 8.128 3.072 16.224 9.28 22.4l362.336 362.336a31.808 31.808 0 0 0 45.12-0.128 31.904 31.904 0 0 0 0.128-45.12L355.2 512 694.72 172.448a31.808 31.808 0 0 0-0.128-45.12 31.904 31.904 0 0 0-45.12-0.128L287.232 489.536a31.616 31.616 0 0 0-9.312 22.4l0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="5082"></path></svg><span class="text" data-v-1443c067>EditableSelect 可输入下拉选择框</span></a></div><div class="next" data-v-1443c067><a class="link" href="/components/input/" data-v-1443c067><span class="text" data-v-1443c067>Input 输入框</span><svg t="1637469947735" class="icon icon icon-next" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4917" width="16" height="16" data-v-1443c067><path d="M746.08 512.064a31.584 31.584 0 0 1-9.28 22.4L374.464 896.8a31.808 31.808 0 0 1-45.12-0.128 31.904 31.904 0 0 1-0.128-45.12L668.8 512 329.28 172.448a31.808 31.808 0 0 1 0.128-45.12 31.904 31.904 0 0 1 45.12-0.128l362.304 362.336c6.208 6.176 9.28 14.272 9.312 22.4l-0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="4918"></path></svg></a></div></div></div><!--[--><!--]--><!----><aside class="toc-warpper" data-v-35e0cb6b data-v-38776bfe><nav class="devui-content-nav" data-v-38776bfe><h3 class="devui-fast-forward" data-v-38776bfe>快速前往</h3><ul class="devui-step-nav" data-v-38776bfe><!--[--><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#基础用法" title="基础用法" data-v-38776bfe>基础用法</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#表单样式" title="表单样式" data-v-38776bfe>表单样式</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#垂直排列" title="垂直排列" data-v-38776bfe>垂直排列</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#多列表单" title="多列表单" data-v-38776bfe>多列表单</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#尺寸控制" title="尺寸控制" data-v-38776bfe>尺寸控制</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#表单校验" title="表单校验" data-v-38776bfe>表单校验</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#form-参数" title="Form 参数" data-v-38776bfe>Form 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#form-事件" title="Form 事件" data-v-38776bfe>Form 事件</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#form-方法" title="Form 方法" data-v-38776bfe>Form 方法</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#form-插槽" title="Form 插槽" data-v-38776bfe>Form 插槽</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#formitem-参数" title="FormItem 参数" data-v-38776bfe>FormItem 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#formitem-方法" title="FormItem 方法" data-v-38776bfe>FormItem 方法</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#formitem-插槽" title="FormItem 插槽" data-v-38776bfe>FormItem 插槽</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#form-类型定义" title="Form 类型定义" data-v-38776bfe>Form 类型定义</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#formitem-类型定义" title="FormItem 类型定义" data-v-38776bfe>FormItem 类型定义</a></li><!--]--></ul><div class="devui-marker" data-v-38776bfe></div></nav></aside></div></main></div><!----><!----><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"components_accordion_index.md\":\"a92e3443\",\"components_alert_index.md\":\"c7702e03\",\"components_anchor_index.md\":\"f7333cbb\",\"components_auto-complete_index.md\":\"4de98e8d\",\"components_avatar_index.md\":\"69aa04d5\",\"components_back-top_index.md\":\"d1ab787c\",\"components_badge_index.md\":\"e4750848\",\"components_breadcrumb_index.md\":\"c976c02b\",\"components_button_index.md\":\"5ad2976d\",\"components_card_index.md\":\"07ffbefa\",\"components_carousel_index.md\":\"f88f0b13\",\"components_cascader_index.md\":\"ee34cce7\",\"components_checkbox_index.md\":\"3ec7d7a1\",\"components_collapse_index.md\":\"9f2cbd98\",\"components_color-picker_index.md\":\"76658b37\",\"components_comment_index.md\":\"7f6ae658\",\"components_countdown_index.md\":\"556b68b1\",\"components_date-picker-pro_index.md\":\"a354c050\",\"components_date-picker_index.md\":\"00801143\",\"components_dragdrop_index.md\":\"27ca48b1\",\"components_drawer_index.md\":\"f1f95db0\",\"components_dropdown_index.md\":\"2e85d37e\",\"components_editable-select_index.md\":\"dfceeabe\",\"components_form_index.md\":\"aa7415f4\",\"components_fullscreen_index.md\":\"91a2fd77\",\"components_gantt_index.md\":\"c7536435\",\"components_grid_index.md\":\"646531b7\",\"components_icon_index.md\":\"b13a05fb\",\"components_image-preview_index.md\":\"6064aa0f\",\"components_input-icon_index.md\":\"03605b44\",\"components_input-number_index.md\":\"75cb181b\",\"components_input_index.md\":\"399db2a5\",\"components_layout_index.md\":\"bd89a2a7\",\"components_list_index.md\":\"398a7889\",\"components_loading_index.md\":\"86c25c88\",\"components_mention_index.md\":\"4e5fcead\",\"components_menu_index.md\":\"5e7b2a2a\",\"components_message_index.md\":\"288b49b1\",\"components_modal_index.md\":\"6d985802\",\"components_multi-auto-complete_index.md\":\"d7dd7812\",\"components_nav-sprite_index.md\":\"59326b1c\",\"components_notification_index.md\":\"17d66bf4\",\"components_overlay_index.md\":\"b3c2d8b1\",\"components_overview_index.md\":\"4f4893a2\",\"components_pagination_index.md\":\"fa43e1ee\",\"components_panel_index.md\":\"78140495\",\"components_popover_index.md\":\"e061fad6\",\"components_progress_index.md\":\"f99bb298\",\"components_quadrant-diagram_index.md\":\"5b863b4f\",\"components_radio_index.md\":\"1569e619\",\"components_rate_index.md\":\"8ed5b018\",\"components_read-tip_index.md\":\"65f3a3e8\",\"components_result_index.md\":\"5a0e2c71\",\"components_ripple_index.md\":\"e22eb85c\",\"components_search_index.md\":\"a6ca9673\",\"components_select_index.md\":\"14f5b72d\",\"components_skeleton_index.md\":\"87cfbcd2\",\"components_slider_index.md\":\"c3e69a49\",\"components_splitter_index.md\":\"7b49b977\",\"components_statistic_index.md\":\"699289db\",\"components_status_index.md\":\"9b3ee9c1\",\"components_steps-guide_index.md\":\"4d707f63\",\"components_steps_index.md\":\"75686d75\",\"components_sticky_index.md\":\"839717a7\",\"components_switch_index.md\":\"05eb9888\",\"components_table_index.md\":\"1b34dab5\",\"components_tabs_index.md\":\"2612fccc\",\"components_tag-input_index.md\":\"d6c90326\",\"components_tag_index.md\":\"9d46f105\",\"components_textarea_index.md\":\"f6a86e66\",\"components_time-picker_index.md\":\"f8cff83c\",\"components_time-select_index.md\":\"38dfaf50\",\"components_timeline_index.md\":\"9b7ebcb4\",\"components_tooltip_index.md\":\"f9f4b384\",\"components_transfer_index.md\":\"7005ca26\",\"components_tree-select_index.md\":\"d122e78e\",\"components_tree_index.md\":\"2611f2c7\",\"components_upload_index.md\":\"65171bcd\",\"components_virtual-list_index.md\":\"6c90a3dd\",\"contributing_development-specification_api-demo-design_index.md\":\"fc9f2d3e\",\"contributing_development-specification_coding-specification_index.md\":\"af51d196\",\"contributing_development-specification_component-document_index.md\":\"a849b30c\",\"contributing_development-specification_directory-organization_index.md\":\"58197a6f\",\"contributing_development-specification_index.md\":\"1df9cfa5\",\"contributing_index.md\":\"7660b0ff\",\"en-us_components_alert_index.md\":\"96d493c1\",\"en-us_components_auto-complete_api-en.md\":\"004a35e9\",\"en-us_components_avatar_index.md\":\"dbe38f1a\",\"en-us_components_badge_index.md\":\"e48f2672\",\"en-us_components_button_index.md\":\"ec772540\",\"en-us_components_carousel_index.md\":\"3fec7a3f\",\"en-us_components_color-picker_index.md\":\"9fe5a01c\",\"en-us_components_comment_index.md\":\"2a0696ba\",\"en-us_components_editable-select_index.md\":\"73d1175f\",\"en-us_components_form_index.md\":\"65caae2d\",\"en-us_components_input_index.md\":\"136ae80e\",\"en-us_components_menu_index.md\":\"0bb24150\",\"en-us_components_message_index.md\":\"3fa5c7c8\",\"en-us_components_modal_index.md\":\"736ef31f\",\"en-us_components_panel_index.md\":\"4a1db166\",\"en-us_components_popover_index.md\":\"6b07f22f\",\"en-us_components_progress_index.md\":\"b364f914\",\"en-us_components_radio_index.md\":\"bddcefa7\",\"en-us_components_rate_index.md\":\"3940452b\",\"en-us_components_read-tip_index.md\":\"56a74b67\",\"en-us_components_result_index.md\":\"369abc51\",\"en-us_components_ripple_index.md\":\"b6d519cb\",\"en-us_components_search_index.md\":\"8745e3f6\",\"en-us_components_skeleton_index.md\":\"73d6ba05\",\"en-us_components_slider_index.md\":\"d6b0ecd3\",\"en-us_components_splitter_index.md\":\"ae397e5b\",\"en-us_components_statistic_index.md\":\"6f27cda4\",\"en-us_components_status_index.md\":\"e80d4793\",\"en-us_components_tag_index.md\":\"2388e235\",\"en-us_components_tooltip_index.md\":\"6013670f\",\"en-us_index.md\":\"45997edd\",\"en-us_quick-start_index.md\":\"5cb0ca76\",\"index.md\":\"d8afff32\",\"on-demand_index.md\":\"cc889f91\",\"quick-start_index.md\":\"2f52f012\",\"theme-guide_index.md\":\"4b58afef\"}")</script>
    <script type="module" async src="/assets/app.43ba01c1.js"></script>
    
  </body>
</html>